<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<script src="/static/order/confirm/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/static/layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="/static/order/confirm/css/JD2.css" />
		<title>订单确认页</title>
	</head>

	<body>
		<!--顶部-->
		<header>
			<div class="header">
				<ul class="header-left">
					<li>
						<img src="/static/order/confirm/img/header_1.png"/>
						<a href="http://taolele.com">首页</a>
					</li>

				</ul>
				<ul class="header-right">
          <li th:if="${session.loginUser!=null}">[[${session.loginUser.username}]]<img src="/static/order/confirm/img/03.png" style="margin-bottom: 0px;margin-left3: 3px;" /><img src="/static/order/confirm/img/06.png" /></li>
          <li th:if="${session.loginUser==null}"><a href="http://auth.taolele.com/login.html">请登录</a></li>

				</ul>
				<div style="clear: both;"></div>
			</div>
		</header>

		<!--logo图片-->
		<div class="top-1" style="margin-left: 280px">
			<!--右侧绿色-->
			<img src="/static/order/confirm/img/08.png" class="img2" />
		</div>

		<!--主体部分-->
		<p class="p1">填写并核对订单信息 <span style="color: red" th:if="${msg != null}" th:text="${msg}"></span></p>
		<div class="section">
			<!--收货人信息-->
			<div class="top-2">
				<span>收货人信息</span>
			</div>

			<!--地址-->
			<div class="top-3 addr-item" th:each="addr : ${orderConfirmData.address}">
				<p th:attr="def=${addr.defaultStatus},addrId=${addr.id}">[[${addr.name}]]</p><span>[[${addr.name}]]  [[${addr.province}]]  [[${addr.city}]] [[${addr.detailAddress}]]  [[${addr.phone}]]</span>
			</div>

		<!--********************************************************************************************-->
		<!--淘乐乐学院自提-->
		<div class="top-4">

		</div>

		<!--支付方式-->
		<h4 class="h4">支付方式</h4>

		<div class="top-6">
			<p>在线支付</p>
		</div>
		<div class="hh1"></div>
		<!--送货清单-->
		<div class="top_1">

			<div class="to_right" align="center">
				<!--图片-->
				<div class="yun1" th:each="item : ${orderConfirmData.items}">
					<img style="width: 100px; height: 150px" th:src="${item.image}" class="yun"/>
					<div class="mi">
						<p>[[${item.title}]]<span style="color: red;"> ￥ [[${#numbers.formatDecimal(item.price,1,2)}]]</span>
							<span> x[[${item.count}]] </span>
							<span>[[${orderConfirmData.stocks[item.skuId]?'有货':'无货'}]]</span></p>
							<span>0.095kg</span></p>
						<p class="tui-1"><img src="/static/order/confirm/img/i_07.png" />支持7天无理由退货</p>
					</div>
				</div>

				<div class="hh1"></div>
			</div>
		</div>
		<div class="bto">

		</div>
		<div class="xia">
			<div class="qian">
				<p class="qian_y">
					<span>[[${orderConfirmData.getCount()}]]</span>
					<span>件商品，总商品金额：</span>
					<span class="rmb" >￥[[${#numbers.formatDecimal(orderConfirmData.getTotal(),1,2)}]]</span>
				</p>
				<p class="qian_y">
					<span>返现：</span>
					<span class="rmb">  -￥0.00</span>
				</p>

			</div>


      <form action="http://order.taolele.com/submitOrder" method="post">
        <input id="addrIdInput" type="hidden" name="addrId"/>
        <input id="payPriceInput" type="hidden" name="payPrice"/>
        <input type="hidden" name="orderToken" th:value="${orderConfirmData.orderToken}"/>
        <button class="tijiao" type="submit">提交订单</button>
      </form>

		</div>
		</div>

		<div class="headera">
			<div class="Logo-tu">
				<span><img src="/static/order/confirm/img/service_items_1.png"/></span>
				<span><img src="/static/order/confirm/img/service_items_2.png"/></span>
				<span><img src="/static/order/confirm/img/service_items_3.png"/></span>
				<span><img src="/static/order/confirm/img/service_items_4.png"/></span>
			</div>
			<div class="table">
				<dl>
					<dt><a href="/toTrade">购物指南</a></dt>
					<dd>
						<a href="/toTrade">购物流程</a>
					</dd>
					<dd>
						<a href="/toTrade">会员介绍</a>
					</dd>
					<dd>
						<a href="/toTrade">生活旅行/团购</a>
					</dd>
					<dd>
						<a href="/toTrade">常见问题</a>
					</dd>
					<dd>
						<a href="/toTrade">大家电</a>
					</dd>
					<dd>
						<a href="/toTrade">练习客服</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="/toTrade">配送方式</a></dt>
					<dd>
						<a href="/toTrade">上门自提</a>
					</dd>
					<dd>
						<a href="/toTrade">211限时达</a>
					</dd>
					<dd>
						<a href="/toTrade">配送服务查询</a>
					</dd>
					<dd>
						<a href="/toTrade"></a>
					</dd>
					<dd>
						<a href="/toTrade">海外配送</a>
					</dd>
					<dd></dd>
				</dl>
				<dl>
					<dt><a href="/toTrade">支付方式</a></dt>
					<dd>
						<a href="/toTrade">货到付款</a>
					</dd>
					<dd>
						<a href="/toTrade">在线支付</a>
					</dd>
					<dd>
						<a href="/toTrade">分期付款</a>
					</dd>
					<dd>
						<a href="/toTrade">邮局汇款</a>
					</dd>
					<dd>
						<a href="/toTrade">公司转账</a>
					</dd>
					<dd></dd>
				</dl>
				<dl>
					<dt><a href="/toTrade">售后服务</a></dt>
					<dd>
						<a href="/toTrade">售后政策</a>
					</dd>
					<dd>
						<a href="/toTrade">价格保护</a>
					</dd>
					<dd>
						<a href="/toTrade">退款说明</a>
					</dd>
					<dd>
						<a href="/toTrade">返修/退换货</a>
					</dd>
					<dd>
						<a href="/toTrade">取消订单</a>
					</dd>
					<dd></dd>
				</dl>
				<dl class="dls">
					<dt><a href="/toTrade">特色服务</a></dt>
					<dd>
						<a href="/toTrade">夺宝岛</a>
					</dd>
					<dd>
						<a href="/toTrade">DIY装机</a>
					</dd>
					<dd>
						<a href="/toTrade">延保服务</a>
					</dd>
					<dd>
						<a href="/toTrade">淘乐乐学院E卡</a>
					</dd>
					<dd>
						<a href="/toTrade">淘乐乐学院通信</a>
					</dd>
					<dd>
						<a href="/toTrade">淘乐乐学院taolele+</a>
					</dd>
				</dl>
			</div>
			<div class="guanyuwomen">
				<ul>
					<li>
						<a href="/toTrade">关于我们</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">联系我们</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">联系客服</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">合作招商</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">商家帮助</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">营销中心</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">手机淘乐乐学院</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">友情链接</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">销售联盟</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">淘乐乐学院社区</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">风险检测</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">隐私政策</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">淘乐乐学院公益</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">English Site</a>
					</li>
					<li>|</li>
					<li>
						<a href="/toTrade">Mdeila $ IR</a>
					</li>
				</ul>
			</div>
			<p class="p1">
				<a href="/toTrade"> 京公网安备 11000002000088号</a>|
				<a href="/toTrade"> 京ICP证070359号</a>|
				<a href="/toTrade"> 互联网药品信息服务资格证编号(京)-经营性-2014-0008 </a>|
				<a href="/toTrade">新出发京零 字第大120007号</a>
			</p>
			<p class="p1">
				<a href="/toTrade"> 互联网出版许可证编号新出网证(京)字150号</a>|
				<a href="/toTrade"> 出版物经营许可证</a>|
				<a href="/toTrade"> 网络文化经营许可证京网文 </a>|
				<a href="/toTrade">[2020]2148-348号 </a>|
				<a href="/toTrade"> 违法和不良信息举报电话 </a>|
				<a href="/toTrade">：4006561155 </a>
			</p>
			<p class="p1">
				<a href="/toTrade"> Copyright © 2020-2020 淘乐乐学院taolele.com 版权所有</a>|
				<a href="/toTrade"> 消费者维权热线：4006067733 经营证照</a>|
			</p>
			<p class="p1">
				<a href="/toTrade"> 淘乐乐学院旗下网站：淘乐乐学院支付</a>|
				<a href="/toTrade"> 淘乐乐学院云</a>
			</p>
			<p class="p3">
				<img src="/static/order/confirm/img/54b8871eNa9a7067e.png" />
				<img src="/static/order/confirm/img/54b8872dNe37a9860.png" />
				<img src="/static/order/confirm/img/54b8875fNad1e0c4c.png" />
				<img src="/static/order/confirm/img/5698dc03N23f2e3b8.jpg" />
				<img src="/static/order/confirm/img/5698dc16Nb2ab99df.jpg" />
				<img src="/static/order/confirm/img/56a89b8fNfbaade9a.jpg" />
			</p>
		</div>
		<script>
			$(document).ready(function () {
                $('.header-right li:nth-of-type(6)').hover(function(){
                    $('.header-r-11').css('display','block')
                },function(){
                    $('.header-r-11').css('display','none')
                })
                $('.header-right li:nth-of-type(12)').hover(function(){
                    $('.header-r-2').css('display','block')
                },function(){
                    $('.header-r-2').css('display','none')
                })
                $('.header-right li:nth-of-type(14)').hover(function(){
                    $('.header-r-3').css('display','block')
                },function(){
                    $('.header-r-3').css('display','none')
                })
                $('.header-l-2').hover(function(){
                    $('.header-l-d').css('display','block')
                },function(){
                    $('.header-l-d').css('display','none')
                })
                $('.header-r-4').hover(function(){
                    $('.h-r-1').css('display','block')
                },function(){
                    $('.h-r-1').css('display','none')
                });
                highlight();
                // 页面加载就查询运费
                getFare($(".addr-item p[def='1']").attr("addrId"));
            })
      
      function highlight() {
			    // 默认颜色是灰色
			    $(".addr-item p").css({"border":"2px solid gray"})
          $(".addr-item p[def='1']").css({"border":"2px solid red"})
      }

      $(".addr-item p").click(function () {
          $("a.addr-item p").attr("def","0");
          $(this).attr("def","1");
          highlight();
          // 选择发生了变化就要获取当前地址id
          var addrId = $(this).attr("addrId");
          // 发送Ajax请求获取运费信息
          getFare(addrId)
      });

      function getFare(addrId) {
          // 给表单回填选择的地址
          $("#addrIdInput").val(addrId);
          $.get("http://taolele.com/api/ware/wareinfo/fare?addrId=" + addrId, function (data) {
              // layer.msg(data.data + "元")
              $("#fareEle").text(data.data.fare)

              var total = [[${orderConfirmData.total}]];
              total = total * 1 + data.data.fare * 1;
              $("#payPrice").text(total);
              $("#payPriceInput").val(total);
              // console.log(data)
              // layer.msg("总金额：" + total + "元")
              $("#recieveAddressEle").text(data.data.memberAddressVo.province + "  " + data.data.memberAddressVo.city + " " + data.data.memberAddressVo.detailAddress);
              $("#recieveEle").text(data.data.memberAddressVo.name)
          })
      }
		</script>
	</body>
</html>